<template>
  <div>
    <el-row :gutter="10" style="margin-left: 5px; margin-top: 5px; margin-right: 5px">
      <!--    案卷信息高级搜索-->
      <el-col :span="24" v-if="showAdvancedSearch" style="margin-bottom: 5px">
        <el-card>
          <el-form :model="volumeQueryParams" ref="queryForm" size="small" :inline="true" label-width="125px">
            <el-form-item label="案卷编号" prop="listno">
              <el-input
                v-model="volumeQueryParams.listno"
                placeholder="请输入案卷编号"
                clearable
                @keyup.enter.native="searchVolume"
              />
            </el-form-item>
            <el-form-item label="档号" prop="volumeno">
              <el-input
                v-model="volumeQueryParams.volumeno"
                placeholder="请输入档号"
                clearable
                @keyup.enter.native="searchVolume"
              />
            </el-form-item>
            <!--            <el-form-item label="分类id" prop="indexId">-->
            <!--              <el-input-->
            <!--                  v-model="volumeQueryParams.indexId"-->
            <!--                  placeholder="请输入分类id"-->
            <!--                  clearable-->
            <!--                  @keyup.enter.native="searchVolume"-->
            <!--              />-->
            <!--            </el-form-item>-->
            <el-form-item label="编制单位" prop="buildorganization">
              <el-input
                v-model="volumeQueryParams.buildorganization"
                placeholder="请输入编制单位"
                clearable
                @keyup.enter.native="searchVolume"
              />
            </el-form-item>
            <!--            <el-form-item label="纸张规格" prop="spec">-->
            <!--              <el-input-->
            <!--                  v-model="volumeQueryParams.spec"-->
            <!--                  placeholder="请输入纸张规格"-->
            <!--                  clearable-->
            <!--                  @keyup.enter.native="searchVolume"-->
            <!--              />-->
            <!--            </el-form-item>-->
            <el-form-item label="保存期限" prop="savetime">
              <el-input
                v-model="volumeQueryParams.savetime"
                placeholder="请输入保存期限"
                clearable
                @keyup.enter.native="searchVolume"
              />
            </el-form-item>
            <el-form-item label="结束时间" prop="fileend">
              <el-date-picker clearable
                              v-model="volumeQueryParams.fileend"
                              type="date"
                              value-format="yyyy-MM-dd"
                              placeholder="请选择结束时间">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="文件开始时间" prop="filestart">
              <el-date-picker clearable
                              v-model="volumeQueryParams.filestart"
                              type="date"
                              value-format="yyyy-MM-dd"
                              placeholder="请选择文件开始时间">
              </el-date-picker>
            </el-form-item>
            <!--            <el-form-item label="级别" prop="securitylayer">-->
            <!--              <el-input-->
            <!--                  v-model="volumeQueryParams.securitylayer"-->
            <!--                  placeholder="请输入级别"-->
            <!--                  clearable-->
            <!--                  @keyup.enter.native="searchVolume"-->
            <!--              />-->
            <!--            </el-form-item>-->
            <!--            <el-form-item label="主题词" prop="thematic">-->
            <!--              <el-input-->
            <!--                  v-model="volumeQueryParams.thematic"-->
            <!--                  placeholder="请输入主题词"-->
            <!--                  clearable-->
            <!--                  @keyup.enter.native="searchVolume"-->
            <!--              />-->
            <!--            </el-form-item>-->
            <!--            <el-form-item label="附注" prop="annotations">-->
            <!--              <el-input-->
            <!--                  v-model="volumeQueryParams.annotations"-->
            <!--                  placeholder="请输入附注"-->
            <!--                  clearable-->
            <!--                  @keyup.enter.native="searchVolume"-->
            <!--              />-->
            <!--            </el-form-item>-->
            <el-form-item label="创建人" prop="cmen">
              <el-input
                v-model="volumeQueryParams.cmen"
                placeholder="请输入创建人"
                clearable
                @keyup.enter.native="searchVolume"
              />
            </el-form-item>
            <el-form-item label="创建时间" prop="ctime">
              <el-date-picker clearable
                              v-model="volumeQueryParams.ctime"
                              type="date"
                              value-format="yyyy-MM-dd"
                              placeholder="请选择创建时间">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="立卷人" prop="injectionperson">
              <el-input
                v-model="volumeQueryParams.injectionperson"
                placeholder="请输入立卷人"
                clearable
                @keyup.enter.native="searchVolume"
              />
            </el-form-item>
            <el-form-item label="立卷时间" prop="injectiondate">
              <el-date-picker clearable
                              v-model="volumeQueryParams.injectiondate"
                              type="date"
                              value-format="yyyy-MM-dd"
                              placeholder="请选择立卷时间">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="审核人" prop="checkperson">
              <el-input
                v-model="volumeQueryParams.checkperson"
                placeholder="请输入审核人"
                clearable
                @keyup.enter.native="searchVolume"
              />
            </el-form-item>
            <el-form-item label="审核时间" prop="checkdate">
              <el-date-picker clearable
                              v-model="volumeQueryParams.checkdate"
                              type="date"
                              value-format="yyyy-MM-dd"
                              placeholder="请选择审核时间">
              </el-date-picker>
            </el-form-item>
            <!--            <el-form-item label="总全宗号" prop="intmaxnum">-->
            <!--              <el-input-->
            <!--                  v-model="volumeQueryParams.intmaxnum"-->
            <!--                  placeholder="请输入总全宗号"-->
            <!--                  clearable-->
            <!--                  @keyup.enter.native="searchVolume"-->
            <!--              />-->
            <!--            </el-form-item>-->
            <!--            <el-form-item label="全宗号" prop="fontsnum">-->
            <!--              <el-input-->
            <!--                  v-model="volumeQueryParams.fontsnum"-->
            <!--                  placeholder="请输入全宗号"-->
            <!--                  clearable-->
            <!--                  @keyup.enter.native="searchVolume"-->
            <!--              />-->
            <!--            </el-form-item>-->
            <!--            <el-form-item label="全总名称" prop="fontsname">-->
            <!--              <el-input-->
            <!--                  v-model="volumeQueryParams.fontsname"-->
            <!--                  placeholder="请输入全总名称"-->
            <!--                  clearable-->
            <!--                  @keyup.enter.native="searchVolume"-->
            <!--              />-->
            <!--            </el-form-item>-->
            <!--            <el-form-item label="缩微号" prop="zoonum">-->
            <!--              <el-input-->
            <!--                  v-model="volumeQueryParams.zoonum"-->
            <!--                  placeholder="请输入缩微号"-->
            <!--                  clearable-->
            <!--                  @keyup.enter.native="searchVolume"-->
            <!--              />-->
            <!--            </el-form-item>-->
            <el-form-item label="档案存储位置" prop="intvumlist">
              <el-input
                v-model="volumeQueryParams.intvumlist"
                placeholder="请输入档案存储位置"
                clearable
                @keyup.enter.native="searchVolume"
              />
            </el-form-item>
            <!--            <el-form-item label="电子档案保存路径" prop="path">-->
            <!--              <el-input-->
            <!--                  v-model="volumeQueryParams.path"-->
            <!--                  placeholder="请输入电子档案保存路径"-->
            <!--                  clearable-->
            <!--                  @keyup.enter.native="searchVolume"-->
            <!--              />-->
            <!--            </el-form-item>-->
            <!--            <el-form-item label="原实体档案存放位置" prop="storeposition">-->
            <!--              <el-input-->
            <!--                  v-model="volumeQueryParams.storeposition"-->
            <!--                  placeholder="请输入原实体档案存放位置"-->
            <!--                  clearable-->
            <!--                  @keyup.enter.native="searchVolume"-->
            <!--              />-->
            <!--            </el-form-item>-->
            <!--            <el-form-item label="单位名称" prop="volumeYuliu2">-->
            <!--              <el-input-->
            <!--                  v-model="volumeQueryParams.volumeYuliu2"-->
            <!--                  placeholder="请输入单位名称"-->
            <!--                  clearable-->
            <!--                  @keyup.enter.native="searchVolume"-->
            <!--              />-->
            <!--            </el-form-item>-->
            <el-form-item label-width="110px" label="案卷流水号" prop="volumeYuliu3">
              <el-input
                v-model="volumeQueryParams.volumeYuliu3"
                placeholder="请输入案卷流水号"
                clearable
                @keyup.enter.native="searchVolume"
              />
            </el-form-item>
            <el-form-item label-width="120px" label="档案盒流水号" prop="volumeYuliu4">
              <el-input
                v-model="volumeQueryParams.volumeYuliu4"
                placeholder="请输入档案盒流水号"
                clearable
                @keyup.enter.native="searchVolume"
              />
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
      <!--    案卷信息-->
      <el-col :span="18">
        <el-card style="height: 780px" v-loading="volumeLoading">
          <div slot="header" class="search-header">
            <div class="show_title">案卷目录：</div>
            <el-input
              v-model="volumeQueryParams.vname"
              placeholder="搜索案卷"
              clearable
              @keyup.enter.native="searchVolume"
              class="my_input"
            />
            <div class="button-group">
              <el-button type="primary" icon="el-icon-search" size="mini" @click="searchVolume"
                         style="margin-left: 10px">搜索
              </el-button>
              <el-button type="success" icon="el-icon-sort" size="mini" @click="toggleSearchMode">高级搜索</el-button>
              <el-button icon="el-icon-refresh" size="mini" @click="resetVolume">重置</el-button>
            </div>
          </div>
          <div class="engs-container" ref="volumeContainer">
            <div
              class="eng-row"
              v-for="volume in volumeList"
              :key="volume.id"
              @click="selectVolume(volume)"
              :class="{ selected: volume === selectedVolume }"
            >
              <i class="folder-icon eng-folder-icon"></i>
              <div slot="reference" class="name-wrapper">
                <span class="folder-name" style="display: inline-block; width: 100%; word-wrap: break-word; white-space: normal;">{{ volume.vname }}</span>
              </div>
            </div>
          </div>
          <div class="pagination-container">
            <!-- 分页信息 -->
            <el-pagination
              @size-change="handleSizeChangeVolume"
              @current-change="handleCurrentChangeVolume"
              :current-page.sync="volumeQueryParams.pageNum"
              :page-size.sync="volumeQueryParams.pageSize"
              layout="total, prev, pager, next, jumper"
              :total="volumeTotal"
            ></el-pagination>
          </div>
        </el-card>
      </el-col>
      <!--    文件信息-->
      <el-col :span="6">
        <el-card style="height: 780px" v-loading="fileLoading">
          <div slot="header" class="search-header">
            <div class="show_title button-group">文件列表：</div>
            <div class="button-group" style="margin-left: auto;">
              <el-button type="primary" size="mini" @click="downloadFiles" v-if="downloadFlag">下载</el-button>
              <el-button type="primary" size="mini" @click="downloadChange" v-if="fileList.length > 0">
                {{ downloadFlag ? '取消' : '批量下载' }}
              </el-button>
            </div>
          </div>
          <div class="engs-container" ref="fileContainer">
            <div
              class="eng-row"
              v-for="file in fileList"
              :key="file.id"
              @click="selectFile(file)"
              @dblclick="openFile(file)"
              :class="{ selected: file === selectedFile }"
            >
              <input type="checkbox" v-model="file.selected" @click.stop="selectFiles(file)" v-if="downloadFlag"/>
              <i class="folder-icon file-folder-icon"></i>
              <div slot="reference" class="name-wrapper">
                <span class="folder-name" style="display: inline-block; width: 100%; word-wrap: break-word; white-space: normal;">{{ file.filename }}</span>
              </div>
            </div>
          </div>
          <div class="pagination-container">
            <!-- 分页信息 -->
            <el-pagination
              @size-change="handleSizeChangeFile"
              @current-change="handleCurrentChangeFile"
              :current-page.sync="fileQueryParams.pageNum"
              :page-size.sync="fileQueryParams.pageSize"
              layout="total"
              :total="fileTotal"
            ></el-pagination>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!--    信息详情-->
    <el-row :gutter="10" style="margin-left: 5px; margin-top: 5px; margin-right: 5px">
      <el-card style="margin-left: 5px;margin-right: 5px">
        <el-row v-if="currentInfo === 'volume'">
          <el-col :span="24">
            <volume-info :volume-info="selectedVolume" @updateVolumeInfo="getVolumeList"></volume-info>
          </el-col>
        </el-row>

        <el-row v-else-if="currentInfo === 'file'">
          <el-col :span="24">
            <file-info :file-info="selectedFile" @updateFileInfo="getFileList"></file-info>
          </el-col>
        </el-row>
      </el-card>
    </el-row>

    <el-dialog :visible.sync="videoDialogVisible" center v-loading="loadingMp4" title="文件详情" :before-close="handleVideoDialogClose">
      <video :src="videoUrl"
             autoplay="autoplay"
             ref="vueRef"
             controls width="100%">
        Your browser does not support the video tag.
      </video>
    </el-dialog>


    <!-- 文件显示弹窗 -->
    <el-dialog :visible.sync="pdfDialogVisible" title="文件详情" :width="dialogWidth" center v-dialog-drag v-dialog-drag-width v-dialog-drag-height :close-on-click-modal = "false">
      <embed :src="pdfUrl" type="application/pdf" width="100%" style="height: 80vh" >
    </el-dialog>
    <el-image-viewer v-if="imgDialogVisible" :zIndex="Number(99999)" :url-list="canvasList"
                     :on-close="closeImgViewer"/>
  </div>
</template>

<script>
  import {listEngInfo} from "@/api/system/enginfo";
  import {listVolumeinfo} from "@/api/system/volumeinfo";
  import {downloadMore, getFile, getPdf, getPic, getTiff, getType, listFileInfo} from "@/api/system/fileinfo";
  import EngInfo from "./engInfo";
  import VolumeInfo from "@/views/system/search/volumeInfo";
  import FileInfo from "@/views/system/search/fileInfo";
  import Tiff from 'tiff.js'
  import {getFileType, getLocalFile} from "@/api/system/fileinfopre";

  export default {
    mounted() {
      // 初始化Viewer.js
    },
    components: {
      EngInfo,
      VolumeInfo,
      FileInfo,
      'el-image-viewer': () => import('element-ui/packages/image/src/image-viewer')
    },
    data() {
      return {
        videoDialogVisible: false, // 控制弹窗的显示与隐藏
        loadingMp4: false,
        videoUrl: "", // 存储视频文件的URL地址
        showAdvancedSearch: false, // 初始时为简单搜索模式
        canvasList: [],
        engList: [], //工程列表
        volumeList: [], //案卷列表
        fileList: [], //文件列表
        activeFile: false, // 当前激活的文件
        popoverTimer: null,
        engTotal: 0, //工程总数
        volumeTotal: 0, //案卷总数
        fileTotal: 0, //文件总数
        ifDelete: 0,

        selectedEng: null,
        selectedVolume: null,
        selectedFile: null,
        currentInfo: "volume",

        volumeQueryParams: {
          pageNum: 1,
          pageSize: 20,
          listno: null,
          oldid: null,
          ruleflag: null,
          rulepid: null,
          volumeno: null,
          sumflag: null,
          topid: null,
          indexId: null,
          projid: null,
          vflag: null,
          vname: null,
          year: null,
          glidenum: null,
          filingflag: null,
          checkupflag: null,
          openflag: null,
          finishflag: null,
          vtagnum: null,
          vtype: null,
          vnum: null,
          vtmpnum: null,
          roomnum: null,
          efilenum: null,
          boxnum: null,
          tname: null,
          buildorganization: null,
          buildorganizationdate: null,
          carrietype: null,
          amount: null,
          spec: null,
          filestart: null,
          fileend: null,
          savetime: null,
          securitylayer: null,
          thematic: null,
          annotations: null,
          totalfile: null,
          totalpage: null,
          txtpage: null,
          picpage: null,
          photopage: null,
          cmen: null,
          ctime: null,
          assessor: null,
          atime: null,
          content: null,
          islocate: null,
          topnode: null,
          lcontent: null,
          lcompany: null,
          llen: null,
          injectionperson: null,
          injectiondate: null,
          checkperson: null,
          checkdate: null,
          jplace: null,
          jman: null,
          tnum: null,
          tzoom: null,
          tflag: null,
          tviewer: null,
          tassessor: null,
          tdesigner: null,
          tvision: null,
          finishday: null,
          intmaxnum: null,
          fontsnum: null,
          fontsname: null,
          regprojid: null,
          zoonum: null,
          strmaxnum: null,
          intvumlist: null,
          path: null,
          storeposition: null,
          volumeYuliu1: null,
          volumeYuliu2: null,
          volumeYuliu3: null,
          volumeYuliu4: null
        },
        fileQueryParams: {
          pageNum: 1,
          pageSize: 200,
          volumeid: null,
          filename: null,
        },

        volumeLoading: false,
        fileLoading: false,

        blobImage: "", //图片url
        pdfUrl: "", // 存储PDF文件的URL地址
        imgDialogVisible: false, // 控制弹窗的显示与隐藏
        pdfDialogVisible: false, // 控制弹窗的显示与隐藏
        dialogWidth: "70%", // 弹窗的宽度
        dialogHeight: "80vh",
        selectedFiles: [], // 存储被选中的文件的数组
        downloadFlag: false, //下载显示勾选框
      };
    },
    created() {
      this.getVolumeList();
    },
    methods: {
      closeImgViewer() {
        this.imgDialogVisible = false
      },
      openMp4(file) {
        this.videoDialogVisible = true; // 显示弹窗
        this.loadingMp4 = true;
        getPdf(file).then((response) => {
          const blob = new Blob([response], {type: "video/mp4"});
          this.videoUrl = URL.createObjectURL(blob);
        }).catch((error) => {
          console.error("获取文件时出错:", error);
        });
        this.loadingMp4 = false;
      },
      loadImage(file) {
        this.canvasList = [];
        this.fileForm = file;
        getPdf(this.fileForm).then((response) => {
          console.log(response)
          this.tiffDialogVisible = true
          // const blob = new Blob([response], { type: "image/jpeg" });
          // this.blobImage = URL.createObjectURL(blob);
          // this.imgDialogVisible = true; // 显示弹窗
          var tiff = new Tiff({buffer: response})
          for (let i = 0, len = tiff.countDirectory(); i < len; ++i) {
            tiff.setDirectory(i)
            var imgs = tiff.toDataURL() // 转化成base64
            if (imgs) {
              this.canvasList.push(imgs)
            }
          }
          console.log(this.canvasList)
        })
          .catch((error) => {
            console.error("获取图片时出错:", error);
            // 可以添加错误处理逻辑，比如显示一个错误提示框等
          });
      },
      downloadFile() {
        // 实现下载文件的逻辑
        const link = document.createElement("a");
        link.href = this.blobImage;
        link.download = "file.jpg";
        link.click();
      },
      printFile() {
        // 实现打印文件的逻辑
        const printWindow = window.open("", "_blank");
        printWindow.document.write(
          `<img src="${this.blobImage}" style="max-width: 100%; height: auto;">`
        );
        printWindow.document.close();
        printWindow.print();
      },
      //获取案卷信息
      getVolumeList() {
        this.volumeLoading = true;
        this.fileList = [];
        listVolumeinfo(this.volumeQueryParams)
          .then((response) => {
            setTimeout(() => {
              this.volumeList = response.rows;
              this.volumeTotal = response.total;
              this.volumeLoading = false;
            }, 300);
          })
          .catch((error) => {
            this.$message.error("获取案卷信息失败:" + error);
            this.volumeLoading = false;
          });
      },
      searchVolume() {
        this.volumeQueryParams.pageNum = 1;
        this.getVolumeList();
      },
      toggleSearchMode() {
        this.showAdvancedSearch = !this.showAdvancedSearch;
      },
      resetVolume() {
        // this.volumeQueryParams.regprojid = null
        this.ifDelete = 1; // 增加 ifDelete 的值，触发子组件的 ifDel 属性变化
        // this.volumeQueryParams.vname = null;
        this.volumeQueryParams = {
          pageNum: 1,
          pageSize: 20,
        };
        this.fileList = [];
        this.fileTotal = 0;
        this.selectedVolume = {};
        this.selectedFile = {};
        this.getVolumeList();
      },
      selectVolume(volume) {
        this.ifDelete = 0;
        this.selectedVolume = volume;
        this.currentInfo = "volume";
        this.fileQueryParams.volumeid = volume.id;
        this.getFileList();
      },
      handleSizeChangeVolume(pageSize) {
        this.volumeQueryParams.pageSize = pageSize;
        this.getVolumeList();
      },
      handleCurrentChangeVolume(currentPage) {
        this.volumeQueryParams.pageNum = currentPage;
        this.getVolumeList();
      },
      //获取文件信息
      getFileList() {
        this.fileLoading = true;
        listFileInfo(this.fileQueryParams).then((response) => {
          response.rows.forEach((file) => {
            file.selected = false; // 为每个数据对象添加selected属性，初始值为false
          });
          setTimeout(() => {
            this.fileList = response.rows;
            this.fileTotal = response.total;
            this.fileLoading = false;
          }, 300);
        }).catch((error) => {
          this.$message.error("获取文件信息失败:" + error);
          this.fileLoading = false;
        });
      },
      selectFile(file) {
        this.selectedFile = file;
        this.currentInfo = "file";
        if (this.downloadFlag === true) {
          this.selectFiles(file)
        }
      },
      selectFiles(file) {
        // 如果文件已经选中，取消选中并从selectedFiles数组中移除
        const index = this.selectedFiles.findIndex(selectedFile => selectedFile.id === file.id);
        if (file.selected) {
          file.selected = false;
          if (index !== -1) {
            this.selectedFiles.splice(index, 1); // 使用splice方法移除指定索引的元素
          }
        } else {
          // 如果文件未选中，选中并添加到selectedFiles数组中
          file.selected = true;
          this.selectedFiles.push(file);
        }
      },
      downloadChange() {
        this.fileList.forEach((file) => {
          file.selected = false; // 为每个数据对象添加selected属性，初始值为false
        });
        this.selectedFiles = [];
        this.downloadFlag = !this.downloadFlag;
      },
      downloadFiles() {
        if (this.selectedFiles.length === 0) {
          this.$message({
            message: '请先选择要下载的文件！',
            type: 'warning'
          });
        } else if (this.selectedFiles.length === 1) {
          console.log(this.selectedFiles);
          this.selectedFiles.forEach(file => {
            this.downloadOneFile(file);
          })
        } else {
          let ids = [];
          this.selectedFiles.forEach(file => {
            ids.push(file.id)
          })
          downloadMore(ids).then((response) => {
            // 处理接收到的二进制ZIP文件数据
            const blob = new Blob([response], {type: "application/zip"});
            const url = window.URL.createObjectURL(blob);
            // 创建一个下载链接并触发点击以下载ZIP文件
            const a = document.createElement('a');
            a.href = url;
            a.download = 'downloaded.zip';
            a.style.display = 'none';
            document.body.appendChild(a);
            a.click();
            window.URL.revokeObjectURL(url);
          });
        }
      },
      // 双击文件名打开文件
      openFile(file) {
        getType(file).then((response) => {
          const fileType = response.toString()
          if (fileType === 'pdf') {
            this.openPDF(file);
          } else if (fileType === 'jpg' || fileType === 'jpeg' || fileType === 'tif' || fileType === 'gif' || fileType === 'png') {
            this.openImg(file);
          } else if (fileType === 'tiff') {
            this.openTiff(file);
          } else if (fileType === 'mp4') {
            this.openMp4(file);
          }
        })
      },
      //打开图片
      openImg(file) {
        this.canvasList=[];
        this.fileForm = file; // 将文件信息保存到fileForm中，以便在getPdf函数中使用
        getPdf(this.fileForm)
          .then((response) => {
            const blob = new Blob([response], {type: "image/jpeg"});
            this.blobImage = URL.createObjectURL(blob);
            this.canvasList.push(URL.createObjectURL(blob))
            this.imgDialogVisible = true; // 显示弹窗
          })
          .catch((error) => {
            console.error("获取图片时出错:", error);
            // 可以添加错误处理逻辑，比如显示一个错误提示框等
          });
      },
      openTiff(file) {
        this.canvasList = [];
        this.fileForm = file;
        getPdf(this.fileForm).then((response) => {
          var tiff = new Tiff({buffer: response})
          this.imgDialogVisible = true;
          for (let i = 0, len = tiff.countDirectory(); i < len; ++i) {
            tiff.setDirectory(i)
            var imgs = tiff.toDataURL() // 转化成base64
            if (imgs) {
              this.canvasList.push(imgs)
            }
          }
          console.log(this.canvasList)
        }).catch((error) => {
          console.error("获取图片时出错:", error);
        });
      },
      //打开PDF
      openPDF(file) {
        this.fileForm = file; // 将文件信息保存到fileForm中，以便在getPdf函数中使用
        getPdf(this.fileForm)
          .then((response) => {
            const blob = new Blob([response], {type: "application/pdf"});
            this.pdfUrl = URL.createObjectURL(blob);
            this.pdfDialogVisible = true; // 显示弹窗
          })
          .catch((error) => {
            console.error("Error occurred while fetching the PDF:", error);
            // 可以添加错误处理逻辑，比如显示一个错误提示框等
          });
      },
      // 下载单个文件名打开文件
      downloadOneFile(file) {
        getType(file).then((response) => {
          const fileType = response.toLowerCase();
          getPdf(file).then( res => {
            // 处理接收到的二进制ZIP文件数据
            const blob = new Blob([res], {type: "application/pdf"});
            const url = window.URL.createObjectURL(blob);
            // 创建一个下载链接并触发点击以下载ZIP文件
            const a = document.createElement('a');
            a.href = url;
            let dotIndex = file.filename.lastIndexOf('.');
            if (dotIndex !== -1) {
              a.download = file.filename.slice(0, dotIndex) + "." + fileType;
            }else{
              a.download = file.filename + "." + fileType;
            }
            a.style.display = 'none';
            document.body.appendChild(a);
            a.click();
            window.URL.revokeObjectURL(url);
          })
        })
      },
      //下载pdf
      downloadPDF(file){
        getPdf(file).then((response) => {
          // 处理接收到的二进制ZIP文件数据
          const blob = new Blob([response], {type: "application/pdf"});
          const url = window.URL.createObjectURL(blob);
          // 创建一个下载链接并触发点击以下载ZIP文件
          const a = document.createElement('a');
          a.href = url;
          a.download = file.filename + ".pdf";
          a.style.display = 'none';
          document.body.appendChild(a);
          a.click();
          window.URL.revokeObjectURL(url);
        });
      },
      //下载tiff
      downloadTiff(file){
        console.log(file)
        getPdf(file).then((response) => {
          // 处理接收到的二进制ZIP文件数据
          const blob = new Blob([response], {type: "application/pdf"});
          const url = window.URL.createObjectURL(blob);
          // 创建一个下载链接并触发点击以下载ZIP文件
          const a = document.createElement('a');
          a.href = url;
          a.download = file.filename + ".tiff";
          a.style.display = 'none';
          document.body.appendChild(a);
          a.click();
          window.URL.revokeObjectURL(url);
        });
      },

      handleSizeChangeFile(pageSize) {
        this.fileQueryParams.pageSize = pageSize;
        this.getFileList();
      },
      handleCurrentChangeFile(currentPage) {
        this.fileQueryParams.pageNum = currentPage;
        this.getFileList();
      },
      handleVideoDialogClose(done){
        this.$refs.vueRef.pause();
        done(); // 调用 done() 完成弹窗的关闭操作
      },

    },
  };
</script>

<style>
  /* 公共样式 */
  .search-header {
    display: flex;
    align-items: center;
  }

  .my_input {
    margin-left: auto;
    width: 35%;
  }

  .dialog-content {
    display: flex;
    flex-direction: column;
  }

  .my_button {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 10px;
    margin-left: 85%;
  }

  .button-group {
    display: flex;
    justify-content: center;
    margin-top: 10px;
  }

  .engs-container {
    height: 600px;
    overflow-y: auto;
  }

  .eng-row {
    flex-basis: 100%;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
  }

  .eng-row:hover {
    cursor: pointer;
    background-color: #e5f3ff;
  }

  .pagination-container {
    margin-top: 10px;
  }

  .folder-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-right: 5px;
    background-size: cover;
  }

  .folder-name {
    flex-grow: 1;
    font-size: 14px;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .show_title {
    font-weight: bold;
    font-size: 1.2rem;
    color: rgb(26, 115, 198);
  }

  .dialog-content {
    display: flex;
    flex-direction: column;
  }

  .button-group {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
  }


  /* 选中状态的样式 */
  .selected {
    /*box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);*/
    background-color: #cce8ff;
  }
</style>

